<template>
  <section>

    <el-col :span="24" class="toolbar">
      <goBack></goBack>
      <el-form :model="informationForm" v-loading="listLoading" :rules="rules" ref="informationForm" label-width="180px" class="demo-informationForm" style="width:967px; margin:0 auto;">
        <el-col :span="24">
          <div class="form-title">
            <h2>{{informationForm.boxname}}基本信息表</h2>
          </div>
          <el-form-item label="保温箱：" prop="boxname">
            <el-input v-model="informationForm.boxname"></el-input>
          </el-form-item>
          <el-form-item label="保温箱外部长：">
            <span>
              <el-input-number v-model="informationForm.outlinelength" :precision="2" label="长" :min="0"></el-input-number> mm，</span>
            <span>
              <span>宽：</span>
              <el-input-number v-model="informationForm.outlinewidth" :precision="2" label="宽" :min="0"></el-input-number> mm，</span>
            <span>
              <span>高：</span>
              <el-input-number v-model="informationForm.outlineheight" :precision="2" label="高" :min="0"></el-input-number> mm</span>
          </el-form-item>
          <el-form-item label="保温箱内部长：">
            <span>
              <el-input-number v-model="informationForm.internallength" :precision="2" label="长" :min="0" @change="UpdateBoxSize"></el-input-number> mm，</span>
            <span>
              <span>宽：</span>
              <el-input-number v-model="informationForm.internalwidth" :precision="2" label="宽" :min="0" @change="UpdateBoxSize"></el-input-number> mm，</span>
            <span>
              <span>高：</span>
              <el-input-number v-model="informationForm.internalheight" :precision="2" label="高" :min="0" @change="UpdateBoxSize"></el-input-number> mm</span>
          </el-form-item>
          <el-form-item label="保温箱容积：">
            <el-input-number v-model="informationForm.volume" :precision="2" label="容积"></el-input-number> mm³
          </el-form-item>
          <el-form-item label="蓄冷剂长：">
            <span>
              <el-input-number v-model="informationForm.refrigerantlength" :precision="2" label="长" :min="0" @change="UpdateRefrigerantSize"></el-input-number> mm，</span>
            <span>
              <span>宽：</span>
              <el-input-number v-model="informationForm.refrigerantwidth" :precision="2" label="宽" :min="0" @change="UpdateRefrigerantSize"></el-input-number> mm，</span>
            <span>
              <span>高：</span>
              <el-input-number v-model="informationForm.refrigerantheight" :precision="2" label="高" :min="0" @change="UpdateRefrigerantSize"></el-input-number> mm</span>
          </el-form-item>
          <el-form-item label="蓄冷剂容积：">
            <el-input-number v-model="informationForm.refrigerantvolume" :precision="2" label="容积"></el-input-number> mm³
          </el-form-item>
          <el-form-item label="蓄冷剂数量：" prop="refrigerantcount">
            <el-input-number v-model="informationForm.refrigerantcount" :step="1" label="蓄冷剂数量"></el-input-number> 个
          </el-form-item>
          <el-form-item label="变相温度：" prop="refrigeranttemperature">
            <el-input-number v-model="informationForm.refrigeranttemperature" :precision="2" :step="0.1" label="变相温度"></el-input-number> ℃
          </el-form-item>
          <el-form-item label="保温层厚度：">
            <el-input-number v-model="informationForm.thickness" :precision="2" label="厚度"></el-input-number> mm
          </el-form-item>

          <el-form-item label="最长运输时间：" prop="transittime">
            <el-input-number v-model.number="informationForm.transittime" :precision="2" placeholder="小时"> </el-input-number> 小时
          </el-form-item>
          <el-form-item label="温度范围：">
            <el-col :span="7">
              <el-input-number v-model="informationForm.lowtemperature" :precision="2" :step="0.1" label="最低温度"></el-input-number> ℃
            </el-col>
            <el-col :span="1">
              <div>到</div>
            </el-col>
            <el-col :span="7">
              <el-input-number v-model="informationForm.hightemperature" :precision="2" :step="0.1" label="最高温度"></el-input-number> ℃
            </el-col>
          </el-form-item>

          <el-form-item label="冷源：" prop="coldsource">
            <el-input v-model="informationForm.coldsource"></el-input>
          </el-form-item>
          <el-form-item label="验证设备型号：" prop="devicemodel">
            <el-input v-model="informationForm.devicemodel"></el-input>
          </el-form-item>

          <el-form-item label="本次验证类型：" prop="loadtype">
            <el-radio-group v-model="informationForm.loadtype">
              <el-radio :label='0'>空载</el-radio>
              <el-radio :label='1'>满载</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="本次验证季节：" prop="seasontype">
            <el-radio-group v-model="informationForm.seasontype">
              <el-radio :label='0'>夏季</el-radio>
              <el-radio :label='1'>冬季</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="验证周期：" prop="verifytype">
            <el-radio-group v-model="informationForm.verifytype">
              <el-radio :label='0'>定期</el-radio>
              <el-radio :label='1'>使用前</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="箱内测点数量：" prop="sensorin">
            <el-input-number v-model.number="informationForm.sensorin" :precision="0" @change="UpdateTotal"></el-input-number>
          </el-form-item>
          <el-form-item label="箱外环境测点数量：" prop="sensorout">
            <el-input-number v-model.number="informationForm.sensorout" :precision="0" @change="UpdateTotal"></el-input-number>
          </el-form-item>
          <el-form-item label="温湿度测点数量：" prop="sensortotal">
            <el-input-number v-model.number="informationForm.sensortotal" :precision="0"></el-input-number>
          </el-form-item>
          <el-form-item label="点位图：" prop="uploadimg" ref="elupload">
            <el-upload :action="importFileUrl" ref="eluploadimg" :data="upLoadData" :on-remove="handleRemove" :headers="httpHeaders" :auto-upload="true" :beforeUpload="beforeAvatarUpload" :onSuccess="uploadSuccess" :file-list="dianweituList" list-type="picture-card">
              <i class="el-icon-plus"></i>
              <div class="el-upload__tip" slot="tip">
                <p>只能上传jpg/png文件</p>
              </div>
            </el-upload>

          </el-form-item>
          <hr>
          <el-form-item>
            <el-button type="primary" @click="submitForm('informationForm','eluploadimg')">确定</el-button>
            <el-button @click="resetForm('informationForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-col>
  </section>
</template>
<script>
import { getToken } from "@/utils/auth";
import NProgress from "nprogress";
import goBack from "@/components/public/goback";
export default {
  components: {
    goBack
  },
  data() {
    return {
      informationForm: {
        boxname: "",
        outlinelength: 0,
        outlinewidth: 0,
        outlineheight: 0,
        volume: 0,
        refrigerantlength: 0,
        refrigerantwidth: 0,
        refrigerantheigh: 0,
        refrigerantvolume: 0,
        refrigeranttemperature: 0,
        refrigerantcount: 0,
        transittime: 0,
        lowtemperature: 0,
        hightemperature: 0,
        coldsource: "",
        devicemodel: "",
        loadtype: 1,
        seasontype: 1,
        verifytype: 1,
        sensortotal: 0,
        sensorin: 0,
        sensorout: 0,
        uploadimg: []
      },

      dianweituList: [],
      httpHeaders: {
        Authorization: getToken()
      },
      upLoadData: {
        projectid: this.$route.params.projectid,
        type: 2
      },
      //dialogImageUrl:"",
      importFileUrl: "/files/upload",
      listLoading: false,
      rules: {
        boxname: [
          {
            type: "string",
            required: "true",
            message: "请填写保温箱名称",
            trigger: "blur"
          }
        ],
        loadtype: [
          {
            required: true,
            message: "请选择本次验证类型",
            trigger: "change"
          }
        ],
        seasontype: [
          {
            required: true,
            message: "请选择本次验证季节",
            trigger: "change"
          }
        ],
        verifytype: [
          {
            required: true,
            message: "请选择本次验证周期",
            trigger: "change"
          }
        ],
        sensortotal: [
          {
            type: "number",
            required: true,
            message: "请填写温湿度测点数量",
            trigger: "blur"
          }
        ],
        sensorin: [
          {
            type: "number",
            required: true,
            message: "请填写车内温湿度测点数量",
            trigger: "blur"
          }
        ],
        sensorout: [
          {
            type: "number",
            required: true,
            message: "请填写车外环境测点数量",
            trigger: "blur"
          }
        ],
        coldsource: [
          {
            type: "string",
            required: "true",
            message: "请填写冷源",
            trigger: "blur"
          }
        ],
        devicemodel: [
          {
            type: "string",
            required: "true",
            message: "请填写验证设备型号",
            trigger: "blur"
          }
        ],

        uploadimg: [
          { required: true, message: "请上传点位图", trigger: "change" }
        ]
      }
    };
  },
  watch: {
    dianweituList: {
      handler(newval) {
        this.informationForm.uploadimg = newval;
      },
      deep: true
    }
  },
  methods: {
    // 容积
    UpdateBoxSize() {
      this.informationForm.volume =
        this.informationForm.internallength *
        this.informationForm.internalwidth *
        this.informationForm.internalheight;
    },
    // 蓄冷剂容积
    UpdateRefrigerantSize() {
      this.informationForm.refrigerantvolume =
        this.informationForm.refrigerantlength *
        this.informationForm.refrigerantwidth *
        this.informationForm.refrigerantheight;
    },
    // 传感器总数
    UpdateTotal() {
      this.informationForm.sensortotal =
        this.informationForm.sensorin + this.informationForm.sensorout;
    },
    //历史点位图
    getdianweituList() {
      this.axios
        .get("/projects/" + this.$route.params.projectid, {
          params: {}
        })
        .then(reply => {
          if (reply.data.status === 0) {
            if (reply.data.data.dianweitufileObject != null) {
              let dianweitufileJSON = reply.data.data.dianweitufileObject;
              this.dianweituList = [];
              this.dianweituList.push({
                name: dianweitufileJSON.file.name,
                url: "/" + dianweitufileJSON.file.dir
              });
            }
          } else {
            this.$message({
              message: `查询出错，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },
    //获取表单信息
    getinformationForm() {
      this.listLoading = true;
      NProgress.start();
      let params = {};
      this.axios
        .get("/projects/yanzhengxinxi/" + this.$route.params.projectid, params)
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            let informationFormfile = reply.data.data;
            Object.keys(informationFormfile).forEach(child => {
              if (
                (informationFormfile[child] === "") &
                (informationFormfile[child] === !"devicemodel") &
                (informationFormfile[child] === !"devicemodel")
              ) {
                informationFormfile[child] = 0;
              }
            });
            this.informationForm = informationFormfile;
            console.log(informationFormfile);
            this.getdianweituList();
          } else {
            this.$message({
              message: `查询出错，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },

    //点位图删除
    handleRemove(file, fileList) {
      this.dianweituList = fileList;
    },

    //点位图检查
    beforeAvatarUpload(file) {
      const extension = file.name.split(".")[1] === "jpg";
      const extension2 = file.name.split(".")[1] === "png";
      if (!extension && !extension2) {
        this.$message({
          message: "上传模板只能是 jpg或png格式!",
          type: "warning"
        });
      }
      return extension || extension2;
    },

    // 上传成功检查
    uploadSuccess(response, file, fileList) {
      if (response.status == 0) {
        this.$refs.eluploadimg.clearFiles();
        this.getdianweituList();
        this.$refs["elupload"].clearValidate();
      } else {
        return this.$message({ type: "error", message: "点位图上传失败" });
      }
    },
    // 提交表单
    submitForm(informationForm, eluploadimg) {
      this.$refs[informationForm].validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {})
            .then(() => {
              NProgress.start();

              let params = {
                projectid: this.$route.params.projectid
              };
              Object.assign(params, this.informationForm);
              this.axios
                .post("/projects/yanzhengxinxi/update", params)
                .then(reply => {
                  this.editLoading = false;
                  NProgress.done();
                  if (reply.data.status === 0) {
                    this.$notify({
                      title: "成功",
                      message: "提交成功",
                      type: "success"
                    });
                    this.$refs.eluploadimg.submit();
                    this.$refs["informationForm"].resetFields();
                    this.getinformationForm();
                  } else {
                    this.$message({
                      message: `提交失败，错误码${
                        reply.data.status
                      },请联系管理员`,
                      type: "warning"
                    });
                  }
                });
            })
            .catch(e => {});
        }
      });
    },
    resetForm(informationForm) {
      this.$refs[informationForm].resetFields();
      this.$refs.eluploadimg.clearFiles();
    }
  },
  mounted() {
    this.getinformationForm();
  }
};
</script>
<style lang="scss" scoped>
hr {
  margin: 20px 0;
  border-top: 1px #ccc solid;
}
h2 {
  width: 100%;
  text-align: center;
}
.form-title {
  margin-bottom: 2em;
  span {
    display: block;
    font-size: 1em;
    color: #212121;
    position: relative;
    :after {
      content: "";
      position: absolute;
      right: 20px;
      top: 52%;
      background: #494949;
      height: 2px;
    }
  }
}
.el-form-item__label {
  width: 200px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 278px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 278px;
  height: 178px;
  display: block;
}
</style>

